<!-- 机构类型选择下拉框 -->
<template>
  <a-select
    allow-clear
    mode="multiple"
    :value="groupIds"
    :placeholder="placeholder"
    @update:value="updateValue"
  >
    <a-select-option
      v-for="item in data"
      :key="item.id"
      :value="item.id"
    >
      {{ item.groupName }}
    </a-select-option>
  </a-select>
</template>

<script setup>
  import { computed, ref } from 'vue';
  import { message } from 'ant-design-vue/es';
  import { listGroups } from '@/api/audio/group';

  const emit = defineEmits(['update:value']);

  const props = defineProps({
    // 选中的对讲组
    value: Array,
    placeholder: {
      type: String,
      default: '请选择对讲组'
    },
    deviceOrg: String
  });

  // 选中的对讲组id
  const groupIds = computed(() => props.value?.map((d) => d.id));

  // 对讲组列表
  const data = ref([]);

  /* 更新选中数据 */
  const updateValue = (value) => {
    emit(
      'update:value',
      value.map((v) => ({ id: v }))
    );
  };
  /* 获取机构类型数据 */
  listGroups({
    groupOrg: props.deviceOrg
  })
    .then((list) => {
      console.log('listGroups====',list)
      data.value = list;
    })
    .catch((e) => {
      message.error(e.message);
    });
</script>
